<template>

    <div>
        <h1>开始使用</h1>
        <ul>
            <li>确保你已经
                <router-link to="/doc/install">安装</router-link>
                了本组件库
            </li>
            <li>然后在你的项目中写入下面的代码：</li>
            <li>
                <pre><code>import {Button, Tabs, Tab, Switch, Dialog. openDialog} from "Drop-UI";</code></pre>
            </li>
            <li>就能使用该组件了。</li>
        </ul>
    </div>
    <div>
        <h2>Vue 单文件组件</h2>
        <ul>
            <li>代码示例：</li>
            <li>
                <pre>
                <code class="html hljs xml">
&lt;template&gt;
    &lt;Switch&gt;Switch开关&lt;/Switch&gt;
    &lt;Button&gt;Button组件&lt;/Button&gt;
    &lt;Dialog&gt;Dialog组件&lt;/Dialog&gt;
    &lt;Tabs&gt;Tabs组件&lt;/Tabs&gt;
&lt;/template&gt;

&lt;script&gt;
import {Switch, Button, Dialog , Tabs } from "crisps-ui";

export default {
components: {Button, Tabs, Tab, Switch, Dialog. openDialog}
}
&lt;/script&gt;
                </code>
                </pre>
            </li>
        </ul>
    </div>
    <div>
        <h2>样式</h2>
        <ul>
            <li>为了更好的样式体验，确保在引入全局样式之前添加如下的css样式</li>
            <li>
                <pre>
                    <code>
[class^='dr-'],[class*=' dr-']{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}</code>
                </pre>
            </li>
        </ul>
    </div>
    <div>
        <h2>More</h2>
        <ul>
            <li>源代码放在了 <a href="https://gitee.com/zhangdeshou/drop-ui">Gitee</a> ，历史提交信息非常规范，可以按照 <a
                    href="https://gitee.com/zhangdeshou/drop-ui/commits/master">commit</a> 的顺序进行查看。
            </li>
            <li>具体运行方法见 <a href="https://gitee.com/zhangdeshou/drop-ui/blob/master/README.md">README.md</a></li>
        </ul>
    </div>
    <div class="page">
        <p class="fl">上一步：
            <router-link to="/doc/install">安装</router-link>
        </p>
        <p class="fr">下一节：
            <router-link to="/doc/switch">Switch 组件</router-link>
        </p>
    </div>


</template>

<script>
    export default {
        name: "Start"
    }
</script>

<style lang="scss" scoped>
    div {
        margin-bottom: 40px;

        & > :first-child {
            margin-bottom: 20px;
            margin-left: 0px;
            position: relative;
            z-index: -1;
        }
        & > *{
            margin-left: 20px;
        }

        em {
            font-style: normal;
            color: #f28f98;
            font-weight: bold;
        }

        a {
            color: #50a0ff;
        }

        p {
            margin-top: 30px;
            float: right;
        }

    }

    ul {
    }

    li {
        /*list-style-type:circle;*/
        padding: 10px 0;
    }

    .page{
        margin-top: 30px;
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        a {
            color: #50a0ff;
        }
    }

</style>
